h1,h2,h3,h4,h5{
    font-weight: normal;
    line-height: 1.2;
}

.guide{
    padding-top: 15px;
    .group{
        height: 50px;
        border-bottom: 1px solid #D8D8D8;
        li{
            float: left;
            position: relative;
            font-size: 14px;
            height: 50px;
            margin-right: 20px;
           .current{
              width: 110px;
              text-align: center;
              
           }
           .bookmark,.sort,.clock{
               margin-right: 10px;
           }
           .arrow{
               margin-left: 10px;
           }
           .bookmark:before{
               content: "\f02e";
           }
           .sort:before{
               content: "\f0dc";
           }
           .clock:before{
               content: "\f017";
           }
           .arrow:before{
               content: "\f0d7";
               
           }
            .arrow{
                transition: transform 0.5s;
            }
           a{
               padding: 11px 10px 16px 10px;
               color: #666;
               display: block;
           }
           
           .sub{
               display: none;
               position: absolute;
               left: 0;
               top:44px;
               width: 130px;
               z-index: 99;
               background-color: #fff;
               box-shadow: 1px 2px 2px rgba(0,0,0,0.2);
               border-radius: 0 0 6px 6px;
               li{
                    float: none;
                    margin: 0;
                    height: inherit;
                    font-size: 12px;
               a{
                   padding: 12px 10px;
                   text-indent: 20px;  //将段落缩进20像素
                   
                   &:hover{
                   background-color: #00C3B6;
                   color: #fff;
               }
               
               }
               
           }
           }
          
        }
        .column:hover .sub{
            display: block;
        }
        .column:hover .arrow{
            transform: rotate(-180deg);
        }
        .column:hover{
           background-color: #fff;
           border-radius: 6px 6px 0 0;
           box-shadow: 1px 2px 2px rgba(0,0,0,0.2);
       }
    }
    
    
}

.primary{
    margin:20px auto 0;
    position: relative;
    height: auto;
    overflow: hidden; 
    .article{
        width: 100%;
        float: left;
        ul{
            margin-right: 360px;
            background: #fff;
            box-shadow: 0 1px 2px rgba(0,0,0,0.1);
            li{
                position: relative;
                border-bottom: 1px solid #e5e5e5;
                color: #999;
                padding: 20px;
                height: auto;
                overflow: hidden;
                &:hover{
                    background-color: #f9f9f9;
                }
                .thumb{
                    float: left;
                    width: 210px;
                    height: 135px;
                    box-shadow: 0 1px 1px rgba(0,0,0,0.3);  
                    
                }
                .item-main{
                    margin-left: 230px;
                    .title a{
                        font-size: 16px;
                        padding: 5px 50px 5px 0;
                        color: #333;
                        display: inline-block;
                    }
                    
                    .meta .job{
                        margin: 8px auto 12px;
                        .work{
                            color: rgba(255,255,255,0.9);
                            background-color: rgba(0,0,0,0.4);
                            padding:2px 4px;
                            border-radius: 2px;
                        }
                        span{
                            margin-left: 15px;
                        }
                    }
                    .meta .descrip{
                        line-height: 20px;
                    }
                    .meta .data{
                        text-align: right;
                        margin-top: 10px;
                       
                        time{
                            color: #666;
                             float: left;
                             i:before{
                                content: "\f073";
                             }
                        }
                        .fire{
                            margin-right: 8px;
                            i:before{
                                content: "\f06d";
                            }
                        }
                        .comment-num{
                            margin-right: 10px;
                        }
                        
                    }
                    .author{
                        position: absolute;
                        top: 20px;
                        right: 20px;
                        a{
                            display: block;
                            width: 40px;
                            height: 40px;
                            border-radius: 100%;
                           overflow: hidden;
                           border: 1px solid rgba(0,0,0,0.08);
                        }
                    }
                }
                
            }
        }
        .page{
            margin: 30px 360px 40px 0;
        }
    }
    
    
}


.sidebar{
    width: 340px;
    float: left;
    margin-left: -340px;
    .hot{
        background-color: #fff;
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
        margin-bottom: 20px;
        h3{
            font-size: 14px;
            padding: 15px 20px;
            background-color: #F9F9F9;
            border: 1px solid #E5E5E5;
        }
         ul li:last-child{
             border-bottom:0 none;
         }
        ul li{
            height: auto;
            padding: 15px 20px;
            overflow: hidden;
            &:hover{
                    background-color: #f9f9f9;
                   }
                   
            .thumb{
                display: block;
                border: 4px solid #fff;
                width: 56px;
                height: 56px;
                overflow: hidden;
                float: left;
                margin-right: 10px;
        }
            .meta{
                    .talk{
                        color: #777;
                        &:hover{
                            text-decoration: underline;
                        }
                    }
                    span{
                        display: block;
                        margin-top: 5px;
                        
                        a{
                            color: #ea4c89;
                        }
                    }
            }
        }
        
    }
    #new-comments{
        .thumb{
            width: 50px;
            height: 50px;
            border-radius: 50px;
        }
        .meta{
            strong{
                font-weight: normal;
                padding-top: 7px;
                color: #00C3B6;
                display: block;
            }
            span{
               color: #777;
            }
        }
        ul li{
            border: 1px solid #f2f2f2;
        }
    }
}




@media only screen and (max-width: 1024px) {
    .primary{
         .article{
        
        float: none;
        ul{
            margin-right: 0px;
        }
        .page{
            margin: 30px 0 40px 0;
        }
    }
   
    .sidebar{
        float: none;
        margin: 20px auto;
        width: auto;
    }
    
    }
   
    
}

@media only screen and (max-width:500px){
    .guide{
        .group{
            height: auto;
            text-align: center;
            ul{
                li{
                margin-right: 0;
                float: none;
                display: inline-block;
                .current{
                  width: auto;
                  .bookmark,.sort,.clock{
                        margin-right: 0;
                   }
                  .arrow{
                        margin-left: 10px;
                   }
                   .bookmark:before{
                       content: "";
                   }
                   .sort:before{
                       content: "";
                   }
                   .clock:before{
                       content: "";
                   }
                }
                .sub{
                    width: 100%;
                    li{
                        width: 100%;
                        a{
                            text-indent: 0;
                        }
                    }
                }
            }
            
            }
        }
        
    }
    .primary{
        .article{
            ul{
                li{
                padding: 10px;
                    .thumb{
                        float: none;
                        width: 100%;
                        height: auto;
                        margin-bottom: 5px;
                        img{
                            display: block;
                            width: 100%;
                        }
                    }
                    .item-main{
                        margin-left: 0;
                        .author{
                            display: none;
                        }
                    }
                }
            }
        }
    }
}
